// 
var form = document.querySelector('form');
form.onsubmit = function(event){
    //  1)阻止事件的默认行为
    event.preventDefault();
    //  2)获取登录数据
    var name = document.querySelector('input:nth-of-type(1)').value;
    var password = document.querySelector('input:nth-of-type(2)').value;
    console.log(name);
    console.log(password);
    // 3.1)发请求，提交数据。request:请求。XML:extended markup language 可扩展的标记语言
    // http:hypertext transform protocol超文本传输协议

    // 新建一个请求对象
    var request = new XMLHttpRequest();

     // 3.4)获取服务器的响应数据：
    
    //请求的状态发生变化的时候，会触发readystatechange事件;
    //可以通过监听这个事件获取响应数据（*监听事件要写在前面）
    request.onreadystatechange = function(){
        // 服务端发送数据结束了;  responseText:响应数据
        console.log(request.responseText);
        if(request.readyState == 4){
            console.log(request.readyState);
            var data = JSON.parse(request.responseText);
            console.log(data);
            if(data.result == 1){
                //**登录成功，跳转到主页;location:地址对象;href:设置地址，相对于当前html文件的地址
                // (../)返回上级;   ( ./ ): 当前路径下
                location.href = './home.html';
            }else{
                // 登录失败，显示失败原因
                alert(data.message);
            }
        }

    }
    // 3.2)
    // para1:请求方式;para2:url.
    request.open('GET','login.php?name='+name+'&password='+password); 
    
    // 3.3)发送请求
    // send:发送
    request.send();
}